<template>
  <div class="purchaseProcessingCenterView">
    <div class="cardview">
      <el-card>
        <div slot="header">
          <span class="headerText">订单查询</span>
        </div>
        <div class="cardview-body">
          <!-- <div class="cardview-body-click">
            <el-row>
              <el-col :span="6">
                <el-button>增</el-button>
              </el-col>
              <el-col :span="6">
                <el-button>删</el-button>
              </el-col>
              <el-col :span="6">
                <el-button>改</el-button>
              </el-col>
              <el-col :span="6">
                <el-button>查</el-button>
              </el-col>
            </el-row>
          </div> -->

          <div class="cardview-body-table">
            <div class="cardview-body-table-title">数据表格</div>
            <el-table :data="bannersList" style="width: 100%">
              <el-table-column prop="id" label="订单id"></el-table-column>
              <el-table-column prop="startsPoint" label="支付方式">
                <template slot-scope="scope">
                    {{ scope.row.payType }}
                </template>
               </el-table-column>
              <el-table-column prop="startPointName" label="订单起点名称"></el-table-column>
              <el-table-column prop="startPoint" label="订单起点经纬度"></el-table-column>

              <el-table-column prop="startsPoint" label="起点图片">
                <template slot-scope="scope">
                  <img :src="scope.row.startPointImages" class="cardview-body-table-img" alt srcset />
                </template>
              </el-table-column>

              <el-table-column prop="endPointName" label="订单终点名称"></el-table-column>
              <el-table-column prop="endPoint" label="订单终点经纬度"></el-table-column>
 
              <el-table-column label="终点图片">
                <template slot-scope="scope">
                  <img :src="scope.row.startPointImages" class="cardview-body-table-img" alt srcset />
                </template>
              </el-table-column>
              <el-table-column prop="carType" label="订单所需车型"></el-table-column>
              <el-table-column label="订单所需车车长">
                <template slot-scope="scope">{{scope.row.carLength}}</template>
              </el-table-column>
              <el-table-column prop="cargoType" label="货物类型"></el-table-column>
              <el-table-column prop="cashDeposit" label="保证金"></el-table-column>
              <el-table-column prop="price" label="运费"></el-table-column>
              <el-table-column
								label="操作"
							>
								<template slot-scope="scope">
                  <el-button type="primary">修改订单状态</el-button>
								</template>
							</el-table-column>
            </el-table>
          </div>

          <div class="cardview-body-changepage">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageQuery.pageNum"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageQuery.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="allCount"
            ></el-pagination>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>


<script>
import { selectOrderByCondition } from "../../../api/orderManagement";
export default {
  data() {
    return {
      pageQuery: {
        startTime: null,
        endTime: null,
        id: null,
        status: null,
        prtsc: null,
        pageNum: null,
        pageSize: null,
      },
      bannersList: null,
      allCount: null,
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    getdata() {
      selectOrderByCondition(this.pageQuery).then((res) => {
        if (res.code == 200) {
          this.bannersList = res.data.selectOrderByCondition;
          this.allCount = res.data.allCount;
        }
      });
    },
    //页面跳转
    handleSizeChange(val) {
      this.pageQuery.pageSize = val;
      this.getdata();
    },
    //规格跳转
    handleCurrentChange(val) {
      this.pageQuery.pageNum = val;
      this.getdata();
    },
  },
};
</script>


<style lang="less" scoped>
.purchaseProcessingCenterView {
  // padding: 20px;
  // overflow: auto;
  // height: 83%;

  .headerText {
    font-size: 25px;
    font-weight: bold;
  }

  .cardview-body-table {
    padding: 20px 10px 0 10px;

    .cardview-body-table-title {
      font-size: 20px;
      font-weight: bold;
      padding-top: 20px;
      padding-bottom: 20px;
      border-top: 1px solid #eeeeee;
      border-bottom: 1px solid #eeeeee;
    }
  }

  .cardview-body-changepage {
    padding: 30px 20px 0 0;
    text-align: right;
  }
}
</style>